<!--
作者：qzy
时间：20221030
说明：此组件为学生管理的入口页面，主要做查看该教学任务下的学生，以及添加、编辑该教学任务的学生
-->
<template>
  <div class="container">
    <div class="title">
      <div class="search">
        <el-input placeholder="请输入学生名称" v-model="searchData.studentName"></el-input>
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button type="warning" @click="rest">重置</el-button>
      </div>
      <div class="operation">
        <ul>
          <li @click="addStudent">
            <el-button type="primary" :icon="CirclePlusFilled">添加</el-button>
          </li>
          <li @click="delStudent">
            <el-button type="danger" :icon="DeleteFilled" :disabled="!studentIds.length > 0">删除</el-button>
          </li>
        </ul>
      </div>
    </div>
    <div class="content">
      <el-table
        :data="tableData"
        border="true"
        style="width: 100%"
        height="450"
        :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{background:'#f4fcff',color:'#2f2f2f', textAlign: 'center'}"
        scrollbar-always-on="true"
        @selection-change="handleSelectionChange"
      >
        <el-table-column width="40" type="selection"/>
        <el-table-column prop="schoolStudent.studentNumber" label="学号"/>
        <el-table-column prop="schoolStudent.name" label="姓名"/>
        <el-table-column prop="schoolStudent.sex" label="性别">
          <template #default="scope">
            <span v-if="scope.row.schoolStudent.sex === 0">保密</span>
            <span v-if="scope.row.schoolStudent.sex === 1">男</span>
            <span v-if="scope.row.schoolStudent.sex === 2">女</span>
          </template>
        </el-table-column>
        <el-table-column prop="schoolTeachingTask.className" label="班级"/>
        <el-table-column prop="schoolTeachingTask.intro" label="专业"/>
        <el-table-column prop="schoolStudent.tel" label="手机号"/>
      </el-table>
      <el-pagination
        class="el-pagination"
        v-model:currentPage="searchData.page"
        v-model:page-size="searchData.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <AddClassStudentDialog
      ref="addDia"
      @getStudentList="getStudentList"
    />
  </div>
</template>

<script lang='ts' setup>
import AddClassStudentDialog from '@/views/page/tearchertack/mycourse/details/teachingdetails/studentmanage/student/AddClassStudentDialog.vue';
import { ref, getCurrentInstance, onMounted } from 'vue';
import Request from '@/api/request/request';
import { ElMessage, ElTable } from 'element-plus';
import {
  CirclePlusFilled, DeleteFilled,
} from '@element-plus/icons-vue';

const { proxy } = getCurrentInstance();
const total = ref(0);
const studentIds = ref([]);// 选中的学生id集合
const teachingTaskId = sessionStorage.getItem('teachingTaskId');// 当前教学任务id
const tableData = ref([]);
const searchData = ref({
  teachingTaskId,
  pageSize: 10,
  page: 1,
  studentName: '',
});
const addDia = ref();

// 获取当前教学任务下的所有学生
const getStudentList = async () => {
  let resData:any = await new Request(proxy.$urls.API_URL_BACKSTAGE_SCHOOLTEACHINGTASKSTUDENT_MANAGE, null, {
    params: {
      teachingTaskId: searchData.value.teachingTaskId,
      pageSize: searchData.value.pageSize,
      page: searchData.value.page,
      studentName: searchData.value.studentName,
    },
  }).get();
  if (resData.success) {
    tableData.value = resData.data.data;
    total.value = resData.data.totalRecords;
  }
};

onMounted(() => {
  getStudentList();
});

// 分页组件，当前页数据数量改变时触发
const handleSizeChange = (val: number) => {
  searchData.value.pageSize = val;
  getStudentList();
};
// 分页组件，页码改变时触发
const handleCurrentChange = (val: number) => {
  searchData.value.page = val;
  getStudentList();
};

// 搜索当前教学任务下的学生
const search = () => {
  getStudentList();
};

// 重置搜索框点击事件
const rest = () => {
  searchData.value.studentName = '';
  getStudentList();
};

// 添加教学任务学生点击事件
const addStudent = () => {
  addDia.value.openDialog();
};

// element表格多选
const handleSelectionChange = (val:any) => {
  studentIds.value = val;
  JSON.parse(JSON.stringify(studentIds.value));
};

const delStudent = async () => {
  const list = studentIds.value.map((item:any) => item.studentId);
  let result:any = await new Request(proxy.$urls.API_URL_BACKSTAGE_SCHOOLTEACHINGTASKSTUDENT_MANAGE, null, {
    params: {
      teachingTaskId,
      studentIds: list.toString(),
    },
  }).delete();
  if (result.success) {
    ElMessage.success('删除成功');
    await getStudentList();
  } else {
    ElMessage.error('删除失败');
  }
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100%;
  padding: 10px 30px 0 30px;
  display: flex;
  flex-direction: column;

  .title {
    width: 100%;
    height: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .search {
      display: flex;

      .el-button {
        height: 30px;
        margin-left: 20px;
        width: 100px;
      }
    }

    .operation {
      ul {
        display: flex;
        list-style: none;
        font-size: 18px;

        li {
          width: 130px;
          height: 35px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 20px;
          border-radius: 10px;
          cursor: pointer;

          span {
            margin-left: 8px;
          }

          .el-button {
            height: 30px;
            margin-left: 20px;
            width: 100px;
          }
        }
      }
    }
  }

  .content {
    margin-top: 20px;

    .el-pagination {
      margin-top: 20px;
    }
  }
}
</style>
